<import template="/admin/_header"/>
<import template="/admin/_content"/>

<div class="page-title">
    <div class="title-env">
        <h1 class="title">卡号管理</h1>
        <p class="description">套餐卡, 激活卡, 试用卡, 包流量卡...管理中心！</p>
    </div>
    <div class="breadcrumb-env">
        <ol class="breadcrumb bc-1">
            <li><a href="/admin"><i class="fa-home"></i>管理端</a></li>
            <li><a href="/admin/card">卡号管理</a></li>
        </ol>
    </div>
</div>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="panel panel-default">

                    <div class="panel-heading">
                        <h3 class="panel-title"></h3>

                        <div class="panel-options">
                            <a href="javascript:;" id="card-add"><span>+</span></a>
                            <a href="/admin/card/export" title="导出到Excel.." target="_blank"><i class="fa-file-excel-o"></i></a>
                            <a href="javascript:;" data-toggle="reload">
                                <i class="fa-rotate-right"></i>
                            </a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table cellspacing="0" class="table table-small-font table-bordered table-striped">
                                <tbody>
                                <tr>
                                    <th>#</th>
                                    <th>卡号</th>
                                    <th>添加时间</th>
                                    <th>类型</th>
                                    <th>参数</th>
                                    <th>有效时间</th>
                                    <th>状态</th>
                                    <th width="150px">操作</th>
                                </tr>
                                <if condition="count($cardList) > 0">
                                    <loop variable="$cardList" key="$key" value="$card">
                                        <tr id="card-{$card->id}">
                                            <td>#{$card->id}</td>
                                            <td>{$card->card}</td>
                                            <td>{(date("Y-m-d H:i:s", $card->add_time))}</td>
                                            <td><if condition="$card->type == 0">套餐卡<elseif condition="$card->type == 1">流量卡<elseif condition="$card->type == 2">试用延期卡<elseif condition="$card->type == 3">余额卡<else>通用卡</if></td>
                                            <td>{$card->info}</td>
                                            <td>
                                                <if condition="$card->type == 0">{$card->expireTime}
                                                    <else> -
                                                </if>
                                            </td>
                                            <td>
                                                <if condition="$card->status == 1">未用
                                                    <else>已用
                                                </if>
                                            </td>
                                            <td>
                                                <a class="btn btn-info btn-sm" href="javascript:;"
                                                   onclick="cardModify('{$card->id}');">编辑</a>
                                                <a class="btn btn-danger btn-sm" href="javascript:;"
                                                   onclick="cardRemove('{$card->id}');">删除</a>
                                            </td>
                                        </tr>
                                    </loop>
                                    <else>
                                        <tr id="card-0">
                                            <td>#</td>
                                            <td colspan="6">没有卡号咯</td>
                                        </tr>
                                </if>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div>
    </div>
</section>
</div>
</div>
<!-- Modal 6 (Long Modal)-->
<div class="modal fade" id="modal-6">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <form role="form" id="card_form" method="post" action="/admin/card/update.json" class="validate">
                <input type="hidden" name="form_add" value="{(time())}"/>
                <input type="hidden" name="card" id="card" value=""/>
                <div class="modal-body">
                    <div id="modal-isload">Content is loading...</div>
                    <div id="modal-isbody" style="display: none;">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="card_no" class="control-label">卡号（只允许系统生成）</label>

                                    <input type="text" class="form-control" name="card_no" id="card_no" value=""
                                           readonly placeholder="只允许系统生成">
                                </div>

                            </div>

                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="card_type" class="control-label">卡类型</label>
                                    <select name="card_type" id="card_type" class="form-control">
                                        <option value="0">套餐卡（A/B/C/D/VIP）</option>
                                        <option value="1">流量卡</option>
                                        <option value="2">试用延期卡</option>
                                        <option value="3">余额卡</option>
                                    </select>
                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="card_info" class="control-label">附加参数</label>
                                    <input type="text" class="form-control" name="card_info" id="card_info" value="C"
                                           placeholder="C" >
                                </div>

                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="card_exp" class="control-label">套餐有效期</label>
                                    <input type="number" class="form-control" name="card_exp" id="card_exp" value="30"
                                           placeholder="30" data-message-required="套餐有效期">
                                </div>

                            </div>
                        </div>
                        <div class="row">

                            <div class="col-md-6" id="is-add">
                                <div class="form-group">
                                    <label for="card_num" class="control-label">卡号数量</label>
                                    <input type="number" class="form-control" name="card_num" id="card_num" value="1"
                                           placeholder="1" data-message-required="卡号数量.">
                                </div>
                            </div>
                            <div class="col-md-6" style="display: none;" id="is-modify">
                                <div class="form-group">
                                    <label for="card_status" class="control-label">是否有效</label>
                                    <select class="form-control" name="card_status" id="card_status">
                                        <option value="1">有效</option>
                                        <option value="0">失效</option>
                                    </select>
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    * [附加参数]
                                    <br/>
                                    套餐卡:套餐类型 / 流量卡:流量(GB) / 试用卡:天数 / 余额卡:充值金额(元)
                                    <br/><br/>
                                    * [套餐有效期] 只对套餐卡生效(单位天)
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">立即保存</button>
                </div>
            </form>
        </div>

    </div>
</div>
<script type="text/javascript">
    var modal_default_body = jQuery('#modal-6 .modal-body').html();
    jQuery(document).ready(function($) {

        $("form#card_form").validate({
            rules: {
                'card_info': "required",
                'number': "required"
            },
            messages: {
                'card_info': "附加信息必须填写",
                'number': "数量必须填写"
            },
            errorElement: 'span',
            errorClass: 'validate-has-error',
            highlight: function (element) {
                $(element).closest('.form-group').addClass('validate-has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('validate-has-error');
            },
            errorPlacement: function (error, element)
            {
                if(element.closest('.has-switch').length)
                {
                    error.insertAfter(element.closest('.has-switch'));
                }
                else {
                    if(element.parent('.checkbox, .radio').length || element.parent('.input-group').length)
                    {
                        error.insertAfter(element.parent());
                    }
                    else
                    {
                        error.insertAfter(element);
                    }
                }
            },
            submitHandler: function(form) {
                $.ajax({
                    url: form.action,
                    method: "POST",
                    dataType: "json",
                    data: $(form).serialize(),
                    success: function(result){
                        if(result.code != 200) {
                            showToastr(result.message, 0, 3000, '系统错误');
                            return;
                        }
                        if(result.data.error == 0) {
                            changeTable(result.data.card);
                            $('#modal-6').modal('hide');
                        }
                        showToastr(result.data.message, 0);

                    },
                    error: function(Xhr){
                        showToastr("出现未知错误，请重试", 0);
                    }
                });
            }
        });

        $("#card-add").on('click', function(){
            $("#modal-6 .modal-body").html(modal_default_body);
            $("input[name='card']").val('');
            $("input[name='card_no']").val('');
            $("#card_type").val(0);
            $("#is-modify").hide().val(0);
            $("#is-add").show();
            $('#modal-6 .modal-title').html('新增卡号');
            $('#modal-6').modal('show', {backdrop: 'static'});
            reset(true);

        });
    });

    function cardRemove(cardId) {
        $.ajax({
            url: "/admin/card/delete.json",
            method: "POST",
            dataType: "json",
            data: {id: cardId},
            success: function(result){
                if(result.code != 200){
                    showToastr(result.message, 0, 3000, '系统错误');
                    return;
                }
                if(result.data.error == 0) {
                    $("#card-" + cardId).remove();
                }
                showToastr(result.data.message, 0);
            },
            error: function(Xhr){
                showToastr("出现未知错误，请重试或联系管理员", 0);
            }
        });
    }
    function cardModify(cardId) {
        $("#modal-6 .modal-body").html(modal_default_body);
        reset(false);
        $.ajax({
            url: "/admin/card/query.json",
            method: "POST",
            dataType: "json",
            data: {id: cardId},
            success: function (result) {
                if(result.code != 200){
                    $('#modal-6').modal('hide');
                    showToastr(result.message, 0, 3000, '系统错误');
                    return;
                }

                if(result.data.error != 1 && result.data.card != null) {
                    var card = result.data.card;
                    $("input[name='card']").val(card.id);
                    $("input[name='card_no']").val(card.card);
                    $("#card_type").val(card.type);
                    $("input[name='card_info']").val(card.info);
                    $("select[name='card_status']").val(card.status);
                    $("input[name='card_exp']").val(card.expireTime);
                    $("#is-modify").show().val(0);
                    $("#is-add").hide();
                    $('#modal-6 .modal-title').html('修改卡号');
                    reset(true);
                }
            },
            error: function (Xhr) {
                showToastr("出现未知错误，请重试或联系管理员", 0);
            }
        });
        $('#modal-6').modal('show', {backdrop: 'static'});
    }

    function changeTable(data) {
        if($("tr#card-" + data.id).html() != undefined) {
            var newData =  "<td>#" + data.id + "</td>";
            newData += "<td>"  + data.card + "</td>";
            newData += "<td>" + data.add_time + "</td>";
            newData += "<td>" + data.type + "</td>";
            newData += "<td>" + data.info + "</td>";
            if(data.type == "0" || data.type == "套餐卡") {
                newData += "<td>" + data.expireTime + "</td>";
            } else {
                newData += "<td> - </td>";
            }
            newData += "<td>" + data.status + "</td>";
            newData += "<td>" + '<a class="btn btn-info btn-sm" href="javascript:;" onclick="cardModify('+data.id+');">编辑</a>' + '<a class="btn btn-danger btn-sm" href="javascript:;" onclick="cardRemove('+data.id+');">删除</a>' + "</td></tr>";
            $("tr#card-" + data.id).html(newData);
        } else {
            /* 新增 */
            var trCount = $("table tbody").children("tr").length;
            var cardNumber = data.length;
            var newData = '';
            for(var i=0;i<cardNumber; ++i) {
                newData += '<tr id="card-"'+data[i].id+'>';
                newData += "<td>#" + data[i].id + "</td>";
                newData += "<td>"  + data[i].card + "</td>";
                newData += "<td>" + data[i].add_time + "</td>";
                newData += "<td>" + data[i].type + "</td>";
                newData += "<td>" + data[i].info + "</td>";
                if(data[i].type == "0" || data[i].type == "套餐卡") {
                    newData += "<td>" + data[i].expireTime + "</td>";
                } else {
                    newData += "<td> - </td>";
                }
                newData += "<td>" + data[i].status + "</td>";
                newData += "<td>" + '<a class="btn btn-info btn-sm" href="javascript:;" onclick="cardModify('+data[i].id+');">编辑</a>' + '<a class="btn btn-danger btn-sm" href="javascript:;" onclick="cardRemove('+data[i].id+');">删除</a>' + "</td></tr>";
            }
            $("table tbody").append(newData);
            if($("#card-0").html() != undefined) $("#card-0").remove();
        }
    }
</script>
<import template="/admin/_footer"/>